<template>
  <div id="payment">
    <van-row>
      <van-col span="24">
        <van-nav-bar title="支付信息" left-arrow @click-left="onClickLeft" />
      </van-col>
      <van-col span="24" class="payment-catch" v-if="!orderStatus">
        <p class="payment-p1">支付失败</p>
        <p class="payment-p2">请在<span>半个小时</span>内完成付款</p>
        <p class="payment-p3">否则订单将会被系统取消</p>
        <van-col span="24"
               class="payment-catch-btn">
        <van-col span="12">
          <van-button type="default" @click="onGoMyOrder">查看订单</van-button>
          </van-button>
        </van-col>
        <van-col span="12">
          <van-button type="default">重新付款</van-button>
        </van-col>
      </van-col>
      </van-col>
      <van-col span="24" v-else class="">
        <van-col span="24" class="payment-then"  >
        <p>支付成功</p>
        <van-col span="12"><van-button type="primary" plain @click="onGoMyOrder">查看订单</van-button></van-col>
        <van-col span="12"><van-button type="info" plain>继续逛</van-button></van-col>
      </van-col>
      
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  name,
  data() {
    return {
      orderStatus: ''
    }
  },
  mounted() {
    this.orderStatus = this.$route.query.PassOrderStatus
    console.log(this.$store.state.OrderStatus);
    this.$post("order/pay",{orderId:this.$route.query.PassOrderId}).then((result) => {
      console.log(result);
    })
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onGoMyOrder(){
      console.log(this.orderStatus);
      if(!this.orderStatus){
      this.$store.commit('PassOrderId',2 )
      this.$router.push('/MyOrder')
      }else{
      this.$store.commit('PassOrderId',3 )
      this.$router.push('/MyOrder')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.payment-then {
  text-align: center;
  p {
    width: 100%;
    color: #77b970;
    line-height: 1rem;
    text-align: center;
    font-size: 0.2rem;
    font-weight: 600;
  }
}
.payment-catch {
  margin-top: 0.5rem;
  width: 100%;
  height: 1.3rem;
  text-align: center;
  opacity: 0.9;
  .payment-p1 {
    color: #c66b6b;
    font-size: 0.2rem;
  }
  .payment-p2 {
    margin: 0.15rem 0rem;
    font-size: 0.14rem;
    span {
      font-size: 0.17rem;
    }
  }
  .payment-p3 {
    font-size: 0.14rem;
  }
}
.payment-catch-btn {
  text-align: center;
}
</style>
